<template>
    <el-container class="layout-container-demo" style="height: 650px">
      <el-aside width="200px">
        <el-scrollbar>
          <!-- 默认打开的模块是序号1与3 <el-menu :default-openeds="['1','3']"> -->
          <el-menu :default-openeds="['1']">  

            <!-- 第一大模块 -->
            <el-sub-menu index="1">
              <!-- 标题与图标 -->
              <template #title>
                <el-icon><message /></el-icon>学习天地
              </template>

              <!-- 分组1 -->
              <el-menu-item-group>
                <template #title>用户管理</template>
                <el-menu-item index="1-1">
                    <!--name 组件名，params 需要传递的参数 ，当to后面的值大于1时候，就需要:to 或者v-bind:to="" 绑定-->
                    <router-link :to="{name:'profile',params:{id:'10086',name:'测试'}}">个人信息</router-link>
                </el-menu-item>
                <el-menu-item index="1-2">
                    <router-link to="/user/list">用户列表</router-link>
                </el-menu-item>
              </el-menu-item-group>

              <!-- 分组2 -->
              <el-menu-item-group title="考勤与文件">
                <el-menu-item index="1-3"><router-link to="/user/calendar">考勤明细</router-link></el-menu-item>
                <el-sub-menu index="1-4">
                <template #title>文件管理</template>
                <el-menu-item index="1-4-1"><router-link to="/user/fileUpload">文件上传</router-link></el-menu-item>
              </el-sub-menu>
              </el-menu-item-group>

            </el-sub-menu>

            <!-- 第二大模块 -->
            <el-sub-menu index="2">
              <template #title>
                <el-icon><HelpFilled /></el-icon>Navigator Two
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="2-1">Option 1</el-menu-item>
                <el-menu-item index="2-2">Option 2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="2-3">Option 3</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="2-4">
                <template #title>Option 4</template>
                <el-menu-item index="2-4-1">Option 4-1</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>

            <!-- 第三大模块 -->
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Platform /></el-icon>Navigator Three
              </template>
              <el-menu-item-group>
                <template #title>Group 1</template>
                <el-menu-item index="3-1">Option 1</el-menu-item>
                <el-menu-item index="3-2">Option 2</el-menu-item>
              </el-menu-item-group>
              <el-menu-item-group title="Group 2">
                <el-menu-item index="3-3">Option 3</el-menu-item>
              </el-menu-item-group>
              <el-sub-menu index="3-4">
                <template #title>Option 4</template>
                <el-menu-item index="3-4-1">Option 4-1</el-menu-item>
              </el-sub-menu>
            </el-sub-menu>
          </el-menu>
        </el-scrollbar>
      </el-aside>
  
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <div class="toolbar">
            <el-dropdown>
              <el-icon style="margin-right: 8px; margin-top: 1px"><Tools /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>View</el-dropdown-item>
                  <el-dropdown-item>Add</el-dropdown-item>
                  <el-dropdown-item>Delete</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
            <span>{{ main_username }}</span>
          </div>
        </el-header>
  
        <el-main>
            <!-- <el-scrollbar> 滚动条 -->
          <el-scrollbar>
            <!-- <el-table :data="tableData">
              <el-table-column prop="date" label="Date" width="140" />
              <el-table-column prop="name" label="Name" width="120" />
              <el-table-column prop="address" label="Address" />
            </el-table> -->
            <router-view />
          </el-scrollbar>
        </el-main>
      </el-container>
    </el-container>
  </template>
  
  <script lang="ts">
  // import { Menu as IconMenu, Message, Setting } from '@element-plus/icons-vue'

    export default {
        props:['username'],
        name: "Main2",
        data(){
          return{
            main_username:''
          }
        },
        created() {
          this.main_username = this.username
        }
    }   

  </script>
  
  <style scoped>
  .layout-container-demo .el-header {
    position: relative;
    background-color: var(--el-color-primary-light-7);
    color: var(--el-text-color-primary);
  }
  .layout-container-demo .el-aside {
    color: var(--el-text-color-primary);
    background: var(--el-color-primary-light-8);
  }
  .layout-container-demo .el-menu {
    border-right: none;
  }
  .layout-container-demo .el-main {
    padding: 0;
  }
  .layout-container-demo .toolbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    right: 20px;
  }
  a {
	  text-decoration: none;
	  color: #0d0d0d;
	}
	.router-link-active {
	  text-decoration: none;
	  color: #090909;
	}
  </style>
  